<template>
  <div class="dashboard-container">
    <div class="welcome-message">
      <h2>欢迎回家，{{ username }}</h2>
    </div>
    <div class="statistics">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card
            shadow="hover"
            style="display: flex; position: relative; height: 150px"
          >
            <el-icon
              size="50px"
              color="#567678"
              style="position: absolute; top: 30%"
              ><User
            /></el-icon>
            <h2 style="margin-left: 50px; position: absolute; top: 28%">
              用户数量:<span>{{ detail.userTotal }}</span>
            </h2>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card
            shadow="hover"
            style="display: flex; position: relative; height: 150px"
          >
            <el-icon
              size="50px"
              color="#567678"
              style="position: absolute; top: 30%"
              ><ShoppingCartFull
            /></el-icon>
            <h2 style="margin-left: 50px; position: absolute; top: 28%">
              商品数量:<span>{{ detail.prodTotal }}</span>
            </h2>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card
            shadow="hover"
            style="display: flex; position: relative; height: 150px"
          >
            <el-icon
              size="50px"
              color="#567678"
              style="position: absolute; top: 30%"
              ><PieChart
            /></el-icon>
            <h2 style="margin-left: 50px; position: absolute; top: 28%">
              订单数量:<span>{{ detail.orderTotal }}</span>
            </h2>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="text-container">
      <div class="timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :hollow="activity.hollow"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="collapse">
        <el-collapse accordion>
          <el-collapse-item class="el-collapse-item" title="使用技术" name="2">
            <div>
              前端: vue3.2、element-plus<br />后端: springboot2.7+mongodb+redis
            </div>
          </el-collapse-item>
          <el-collapse-item title="码云地址" name="3">
            <div style="display: flex; flex-direction: row">
              <el-avatar
                shape="square"
                :size="40"
                :src="'https://foruda.gitee.com/avatar/1696342942137152712/5352827_adnaan_1696342942.png'"
                style="border-radius: 50%; margin-top: 10px"
              >
              </el-avatar>
              <el-button
                type="primary"
                style="margin-left: 10px; margin-top: 10px"
                @click="goTarget('https://gitee.com/adnaan')"
                >访问我的主页</el-button
              >
            </div>
          </el-collapse-item>
          <el-collapse-item title="作者@duyong" name="4">
            <div>email:1662877157@qq.com</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { MoreFilled } from '@element-plus/icons-vue'
import { onMounted, reactive, toRefs } from 'vue'
import { homeApi } from '@/api/system/home'
export default {
  data() {
    return {
      username: 'Adnaan'
    }
  },
  setup() {
    const activities = [
      {
        content: '大体完成，测试中.....',
        timestamp: '2023-11-1',
        size: 'large',
        type: 'primary',
        icon: MoreFilled
      },
      {
        content: '写后端接口',
        timestamp: '2023-10-29',
        color: '#0bbd87'
      },
      {
        content: '设计页面',
        timestamp: '2023-10-28',
        size: 'large'
      },
      {
        content: '设计数据库',
        timestamp: '2023-10-26',
        type: 'primary',
        hollow: true
      },
      {
        content: '项目初始化',
        timestamp: '2023-10-25'
      }
    ]
    const data = reactive({
      detail:{}
    })
    const getHomeDetail=()=>{
      homeApi({}).then(res=>{
        if(res){
          data.detail=res.data
        }
      })
    }
    getHomeDetail()
    return {
      activities,
      ...toRefs(data)
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  margin: 10px 20px;
  display: flex;
  flex-direction: column;
}
.dashboard-container .statistics {
  margin: 20px 10px;
}
.text-container {
  display: flex;
  flex-direction: row;
  margin: 20px 20px;
}
.text-container .timeline {
  flex: 1;
}
.text-container .collapse {
  flex: 2;
}
</style>
